<template>
  <div class="detail">
    <div class="scroll-view">
      <div class="scroll-part">
        <nav class="nav">
          <div class="navbar">
            <b class="yo-ico" @click="backHandler">&#xe66c;</b>
            <b class="yo-ico">&#xe639;</b>
          </div>
        </nav>
        <div class="article">
          <h1>薄雾浓云愁永昼</h1>
          <div class="person-div">
            <van-sticky class="mounting">
                <PersonalList></PersonalList>
            </van-sticky>
            
          </div>
          <div class="article-content">
            <p>
              瑞虹天地月亮湾L1
              既能买家具又能吃美食，还有这种跨界骚操作？集家居和餐饮于一体的Minderlands™就做到啦~
            </p>
            <img src="../../../../public/img/1.png" alt="" />
            <p>
              一楼家居：
              家具家居设计风格重要，而且一旦定下来也很难改变。这点小纠结Minderlands™也想到啦，每年有专门的采购团队在国内外搜寻新产品，专属的设计团队也启动创意模式，带来原创设计！
            </p>
            <img src="../../../../public/img/2.png" alt="" />
            <p>
              因为直接合作和大量采购，Minderlands™会有更多贴心实惠的价格！（此处鼓掌！）
            </p>
            <img src="../../../../public/img/3.png" alt="" />
            <p>
              一楼家居：
              家具家居设计风格重要，而且一旦定下来也很难改变。这点小纠结Minderlands™也想到啦，每年有专门的采购团队在国内外搜寻新产品，专属的设计团队也启动创意模式，带来原创设计！
            </p>
          </div>
          <div class="category-btn">
            <button>设计&nbsp;></button>
            <button>装修&nbsp;></button>
            <button>家居&nbsp;></button>
          </div>
          <div class="praise-btn">
            <span>赞赏</span>
          </div>
          <div class="showicon">
            <div class="showicon-center">
              <img src="../../../../public/img/u764.png" alt="" />
              <img src="../../../../public/img/u764.png" alt="" />
              <img src="../../../../public/img/u764.png" alt="" />
              <img src="../../../../public/img/u764.png" alt="" />
              <img src="../../../../public/img/u764.png" alt="" />
              <img src="../../../../public/img/u764.png" alt="" />
            </div>
          </div>
          <p class="other">相关阅读</p>
          <div class="news-part">
              <Newbox></Newbox>
            <Newbox></Newbox>
            <Newbox></Newbox>
          </div>
          <p class="other">最热评论</p> 
          <Answer></Answer>
          <Answer></Answer>
          <Answer></Answer>
        </div>
      </div>
    </div>
    <div class="bottom-operation">
      <input type="text" placeholder="添加评论..." />
      <div>
        <div>
          <i class="yo-ico">&#xe611;</i>
          <p>122</p>
        </div>
        <div>
          <i class="yo-ico">&#xe6d3;</i>
          <p>收藏</p>
        </div>
        <div>
          <i class="yo-ico">&#xe607;</i>
          <p>评论33</p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Answer from '@/components/forcommont/Answer'
import PersonalList from '../../../components/forcommont/PersonList'
import Newbox from '@/components/forcommont/Newbox'


export default {
    components:{
        PersonalList,
        Answer,
        Newbox
    },
    methods:{
        backHandler(){
            e.preventDefault()
            this.$router.back()
            console.log("sfrfs");
        }
    }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/border.styl'
.detail
    width 100%
    display flex
    flex-direction column
    height 100%
    .scroll-view
        flex 1
        height 6.76rem
        overflow scroll
        .scroll-part
            // height 6rem
            // overflow auto
            .nav
                width 100%
                height 2rem
                background-color #999
                background-image url('../../../../public/img/back.jpg')
                z-index -1
                
                .navbar
                    pointer-events: none;
                    height .4rem
                    display flex 
                    justify-content space-between
                    padding 0 .1rem
                    
                    >b
                        font-size .24rem
            .article
                margin-top -.3rem
                border-radius .3rem .3rem 0 0
                background-color white
                >h1
                    padding .2rem .1rem .1rem .1rem
                .person-div
                    padding 0 .1rem
                    .mounting
                        background-color white
                .article-content
                    >p
                        color #999
                        padding .1rem .2rem
                        margin  .1rem 0
                    >img 
                        padding 0 .2rem
                    &:last-child
                        padding 0 .2rem
                .category-btn
                    display flex 
                    justify-content flex-start
                    margin-left .1rem
                    >button 
                        margin-left .1rem
                        border-style none
                        color #3D7EFF
                        width .5rem
                .praise-btn
                    width 100%
                    height .3rem
                    display flex 
                    justify-content center
                    margin-top .2rem
                    >span  
                        width .8rem
                        background-color #F49831
                        color white
                        text-align center 
                        line-height .3rem
                        font-size .16rem
                        border-radius .3rem
                .showicon
                    height .4rem
                    margin-top .1rem
                    display flex
                    justify-content center 
                    .showicon-center 
    
                        display flex
                        padding-left .1rem
                        >img   
                            width .3rem
                            height .3rem
                            margin-left -.1rem
                            border-radius .4rem
                            border solid .02rem white
                .other
                    padding .1rem 0 .1rem .1rem
                .news-part
                    padding 0 .1rem
                    margin-bottom .2rem
    .bottom-operation
        border_1px(1px 0 0 0)
        height .6rem
        display flex
        background-color white
        >input 
            flex 1
            text-align center
            margin .1rem .2rem .1rem .2rem
            height .3rem
            width .8rem
            border-radius .15rem
            border-style none
            background-color #f2f2f2

        >div
            flex 3
            display flex
            justify-content space-around
            margin  .1rem .2rem .1rem .2rem
            >div 
                display flex
                flex-direction column
                align-items center


</style>